<template>
    <view class="sift pr-30 pl-30 space-between">
        <view class="column flex-auto justify-content" @click="handleOpenDate">
            <view class="ft-28 t-9 line-height1">入住时间</view>
            <viw class="ft-36 c-m mt-16 space-between line-height1">
                <view class="bold"> {{ startTime || '请选择' }} - {{ endTime || '请选择' }} </view>
                <view v-if="checkInInfo.nightsCount" class="ft-28 t-6">
                    共{{ checkInInfo.nightsCount || '' }}晚
                </view>
            </viw>
        </view>
        <view class="column pl-30 ml-30 header-right justify-content" @click="handleOpenInfo">
            <view class="ft-28 t-9 text-right line-height1">间数人数</view>
            <view class="ft-36 bold c-m align-center mt-16 line-height1">
                <view class="align-center">
                    <text class="mr-4">{{ checkInInfo.roomAmount || 1 }}</text>
                    <hj-image
                        src="roomList-01.png"
                        :height="iconsSize"
                        :width="iconsSize"
                        mode="aspectFit"
                    />
                </view>
                <view class="align-center ml-10">
                    <text class="mr-4">{{ checkInInfo.adult || 1 }}</text>
                    <hj-image
                        src="roomList-02.png"
                        :height="iconsSize"
                        :width="iconsSize"
                        mode="aspectFit"
                    />
                </view>
                <view class="align-center ml-10">
                    <text class="mr-6">{{ checkInInfo.confirmhildren || 0 }}</text>
                    <hj-image
                        src="roomList-03.png"
                        :height="iconsSize"
                        :width="iconsSize"
                        mode="aspectFit"
                    />
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
/**
 * @description 筛选
 * @author yinzhi
 * @date 2025-05
 */
import { ref, defineComponent, computed } from 'vue'
import dayjs from 'dayjs/esm/index'
defineComponent({
    name: 'Sift'
})

import { useStore } from 'vuex'
const store = useStore()

const iconsSize = ref('32rpx')

// 入住信息
const checkInInfo = computed(() => store.state.platform.checkInInfo || '')
// 入住时间
const startTime = computed(() => dayjs(checkInInfo.value.startDate).format('MM/DD') || '')
const endTime = computed(() => dayjs(checkInInfo.value.endDate).format('MM/DD') || '')

const emit = defineEmits(['openDate', 'openInfo'])
// 打开日历弹窗
const handleOpenDate = () => {
    emit('openDate')
}
// 打开入住人数弹窗
const handleOpenInfo = () => {
    emit('openInfo')
}
</script>

<style scoped lang="scss">
.sift {
    height: 120rpx;
    border-top: 1px solid rgba($color: $uni-bg-color-grey, $alpha: 0.8);
    background: #fff;
    box-shadow: 0 6rpx 10rpx rgba($color: #000000, $alpha: 0.08);
    position: relative;
    z-index: 60;
    .header-right {
        position: relative;
    }
    .header-right::before {
        content: '';
        display: block;
        width: 1px;
        height: 70%;
        background: #e1e1e1;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }
}
</style>
